<template>

	<view class="Navbar" :class="[`bgMake${bgMake}`]">
		<view class="statusBar" :style="statusBarStyle"></view>
		<view class="statusBar " :style="{'height':Pinia.BarHeight+'px'}">
			<view class="Back" :style="mentWidth" v-if="city " @click="TaggleCity">
				<view class="iconfont icon-a-zu3947 size28 color"></view>
				<text class="City ellipsis">{{Pinia.City}}</text>
			</view>
			<view :style="mentWidth" v-if="tabBar && !city"></view>
			<view class="Back" :style="mentWidth" v-if="!tabBar" @click="tapBack">
				<view class="iconfont icon-back size32" v-if="fromShare == 0"></view>
				<view class="iconfont icon-shouye1 size42" v-else></view>
			</view>
			<view class="Title ellipsis">{{title?title:Pinia.title}}</view>
			<view :style="mentWidth"></view>
		</view>
	</view>
	<view class="topView" :style="TotalHeight" v-if="Bot"></view>

</template>

<script setup>
	/*
	bgMake
	  1、背景透明
	  2、背景白色
	  3、背景主题色
	  4、背景自定义 diyBg #ed7083
	  5、渐变
	 Color 字体颜色
	*/
	import { defineProps, ref, onBeforeMount, inject } from 'vue'
	import { usePiniaStore } from '@/store/pinia.js'

	const Pinia = usePiniaStore()
	const Utils = inject('Utils')
	const props = defineProps({
		title: {
			type: String,
			default: '',
		},
		bgMake: {
			type: Number,
			default: 5
		},
		diybg: {
			type: String,
			default: '',
		},
		Color: {
			type: String,
			default: '#000'
		},
		city: {
			type: Boolean,
			default: false,
		},
		tabBar: {
			type: Boolean,
			default: false
		},
		fromShare: {
			type: Number,
			default: 0
		},
		Bot: {
			type: Boolean,
			default: true
		}
	})

	const statusBarStyle = ref('');
	const mentBut = ref('');
	const mentWidth = ref('');
	const TotalHeight = ref('');
	onBeforeMount(() => {
		classStyle();
	})

	const classStyle = () => {
		const allHeight = Pinia.System.statusBarHeight + Pinia.BarHeight;
		statusBarStyle.value = ['height:' + Pinia.System.statusBarHeight + 'px'].join(';');
		mentWidth.value = ['width:' + Pinia.menWidth + 'px', 'height:' + Pinia.BarHeight + 'px'].join(';');
		TotalHeight.value = ['height:' + allHeight + 'px'].join(';');
	}

	const TaggleCity = () => {
		Utils.toUrl(`/pages/cityList/cityList`)
	}

	const tapBack = () => {
		props.fromShare == 0 ? Utils.back() : Utils.pageHome();

	}
</script>

<style lang="scss" scoped>
	.Navbar {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 8888;
		padding: 0;
		overflow: hidden;
	}

	.statusBar {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.Title {
		flex: 1;
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
		color: v-bind('props.Color');
	}

	.Back {
		display: flex;
		align-items: center;
		padding-left: 20rpx;
	}

	.bgMake1 {
		background-color: transparent;
	}

	.bgMake2 {
		background-color: #ffffff;
	}

	.bgMake3 {
		background-color: $themeColor;
	}

	.bgMake4 {
		background-color: v-bind('props.diybg');
	}

	.bgMake5 {
		background-image: linear-gradient(to top, $pageBg 0%, #f4e5e8 26%, #f2d4da 100%);
		padding: 0;
		overflow: hidden;
	}

	.City {
		flex: 1;
		color: $themeColor;
		font-size: 28rpx;
		padding-left: 10rpx;
	}

	.topView {
		width: 100%;
	}
</style>